<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<script src="../jq/jQuery-1.8.3.js"></script>
			<script>
			$(function(){	
				//影藏
				$("#b1").click(function(){
					$("#div").hide(3000,"linear",function(){
						alert("图片没有了")
					});
				});
				//显示
				$("#b2").click(function(){
					$("#div").show(3000,"linear",function(){
						alert("图片出来了")
					});
				});
				//出现
				$("#b3").click(function(){
				$("#div").fadeIn(3000,"linear",function(){
						alert("图片出来了")
					});
				});
				//消失
				$("#b4").click(function(){
				$("#div").fadeOut(3000,"linear",function(){
						alert("图片消失了")
					});
				});
			});
			</script>

	</head>
	<body>
		<div id="div">
			<img src="/jQuery/lian2/img/shoppingBg.jpg" height="200px"/>
		</div>
		<p>
			<input type="button" value="隐藏" id="b1"/>
			<input type="button" value="显示" id="b2"/>
			<input type="button" value="淡入" id="b3"/><!--出现-->
			<input type="button" value="淡出" id="b4"/><!--消失-->
		</p>
	</body>
</html>

